<template>
   <div class="json-toolbar">
      <div class="json-toolbar__header">
         <div class="json-toolbar__header--title" v-html="title"></div>
         <div class="json-toolbar__header--tool">
            <template v-if="type == 'input'">
               <el-button icon="el-icon-s-promotion" circle type="primary" @click="onValidate"></el-button>
               <el-button icon="el-icon-refresh" circle @click="onRefreshJson"></el-button>
            </template>
            <template v-else>
               <el-button 
                  icon="el-icon-document-copy" 
                  circle 
                  v-clipboard:copy="contentJson"
                  v-clipboard:success="onCopySuccess"
                  v-clipboard:error="onCopyError"
               ></el-button>
            </template>
            <el-button icon="el-icon-brush" circle @click="onFormatJson"></el-button>
         </div>
      </div>
      <div class="json-toolbar__content" :style="{height: `${contentHeight}px`}">
         <el-input type="textarea" v-model="contentJson" :placeholder="palceholder" :readonly="readonly"></el-input>
      </div>
   </div>
</template>

<script>
import { replacer } from "@/utils/zkComm";

export default {
   name: 'ApplicationEditJsonEditor',
   model: {
      prop: "value",
      event: "change"
   },
   props: {
      title: {
         type: String,
         default: '标题'
      },
      palceholder: {
         type: String,
         default: '请输入内容'
      },
      type: {
         type: String,
         default: 'input' // input 输入 output 输出
      },
      readonly: {
         type: Boolean,
         default: false
      },
      value: {
         type: String,
         default: ''
      },
      indent: {
         type: Number,
         default: 2
      },
      contentHeight: {
         type: Number,
         default: 200
      }
   },
   data() {
      return {
         defaultJson: '{ "pageSize": 10, "pageNum": 1}',
         contentJson: '',
         ruleForm: {
            json: ''
            // json: '{"data":[{"name":"API调用总次数","code":"API_INVOKE","data":[{"date":"2021-06-29","totalNum":0,"sort":13},{"date":"2021-06-30","totalNum":0,"sort":12},{"date":"2021-07-01","totalNum":0,"sort":11},{"date":"2021-07-02","totalNum":0,"sort":10},{"date":"2021-07-03","totalNum":0,"sort":9},{"date":"2021-07-04","totalNum":6,"sort":8},{"date":"2021-07-05","totalNum":10,"sort":7},{"date":"2021-07-06","totalNum":13,"sort":6},{"date":"2021-07-07","totalNum":7,"sort":5},{"date":"2021-07-08","totalNum":0,"sort":4},{"date":"2021-07-09","totalNum":0,"sort":3},{"date":"2021-07-10","totalNum":0,"sort":2},{"date":"2021-07-11","totalNum":0,"sort":1},{"date":"2021-07-12","totalNum":0,"sort":0}]},{"name":"API服务总个数","code":"API_RELEASE","data":[{"date":"2021-06-29","totalNum":0,"sort":13},{"date":"2021-06-30","totalNum":0,"sort":12},{"date":"2021-07-01","totalNum":0,"sort":11},{"date":"2021-07-02","totalNum":0,"sort":10},{"date":"2021-07-03","totalNum":0,"sort":9},{"date":"2021-07-04","totalNum":0,"sort":8},{"date":"2021-07-05","totalNum":0,"sort":7},{"date":"2021-07-06","totalNum":0,"sort":6},{"date":"2021-07-07","totalNum":0,"sort":5},{"date":"2021-07-08","totalNum":0,"sort":4},{"date":"2021-07-09","totalNum":0,"sort":3},{"date":"2021-07-10","totalNum":0,"sort":2},{"date":"2021-07-11","totalNum":0,"sort":1},{"date":"2021-07-12","totalNum":0,"sort":0}]},{"name":"API订阅总人数","code":"API_SUBSCRIBE","data":[{"date":"2021-06-29","totalNum":0,"sort":13},{"date":"2021-06-30","totalNum":0,"sort":12},{"date":"2021-07-01","totalNum":0,"sort":11},{"date":"2021-07-02","totalNum":0,"sort":10},{"date":"2021-07-03","totalNum":0,"sort":9},{"date":"2021-07-04","totalNum":0,"sort":8},{"date":"2021-07-05","totalNum":0,"sort":7},{"date":"2021-07-06","totalNum":0,"sort":6},{"date":"2021-07-07","totalNum":0,"sort":5},{"date":"2021-07-08","totalNum":0,"sort":4},{"date":"2021-07-09","totalNum":0,"sort":3},{"date":"2021-07-10","totalNum":0,"sort":2},{"date":"2021-07-11","totalNum":0,"sort":1},{"date":"2021-07-12","totalNum":0,"sort":0}]}]}'
         }
      }
   },
   computed: {
      inputValue: {
         get() {
               return this.value;
         },
         set(newValue) {
               this.$emit("change", newValue);
         }
      }
   },
   watch: {
      inputValue: {
         handler: function (json) {
            this.contentJson = json
            if (this.readonly) {
               if (this.type == 'input') this.contentJson = this.defaultJson
            }
            if (this.contentJson) this.onFormatJson()
         },
         immediate: true
      }
   },
   methods: {
      onFormatJson() {
         if (!this.contentJson) return
         
         this.contentJson = JSON.stringify(JSON.parse(this.contentJson), replacer, this.indent)
      },
      onRefreshJson() {
         if (this.type == 'input') {
            this.contentJson = this.inputValue || this.defaultJson
         }
         if (this.type == 'output') {
            this.contentJson = ''
         }
      },
      onValidate() {
         // 触发验证按钮，验证逻辑根据业务需要处理
         this.$emit('validate')
      },
      onCopySuccess() {
         this.msgSuccess('复制成功')
      },
      onCopyError() {
         this.msgError('复制失败！')
      }
   }
}
</script>

<style lang="scss" scoped>
.json-toolbar {
   width: 100%;
   height: 100%;
   font-size: 14px;

   &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &--title {
         // width: 120px;
         font-weight: bold;
      }

      &--tool {
         // padding: 0 10px;
         flex: 1;
         text-align: right;
      }
   }

   &__content {
      padding: 10px 0 0;
      height: 200px;

      .el-textarea {
            height: 100%;
      }

      ::v-deep textarea {
            height: 100%;
            resize: none;
      }
   }
}
</style>